/* Glassmorphic Depth Design - Apple-inspired elegant AI sidebar */

/* Multi-layer glass edge bars with depth perception */
.ai-glass-layer-1,
.ai-glass-layer-2,
.ai-glass-layer-3 {
  transform-origin: right bottom;
  transition:
    width 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: width, opacity, transform, box-shadow;
}

/* Layered glass card with depth */
.ai-glass-card {
  will-change: transform;
}

/* Premium glass button */
.ai-glass-button {
  will-change: transform, box-shadow;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle shimmer on hover */
.ai-glass-button:hover {
  box-shadow:
    0 4px 16px rgba(255, 92, 0, 0.15),
    0 8px 32px rgba(255, 92, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* Depth shadow for glass layers */
.ai-glass-card > div {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Performance optimization with hardware acceleration */
.ai-glass-layer-1,
.ai-glass-layer-2,
.ai-glass-layer-3,
.ai-glass-card,
.ai-glass-button {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
